<template>
  <div class="user-Register">
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="账户" prop="account">
        <el-input v-model.number="ruleForm.account"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pass">
        <el-input
          type="password"
          v-model="ruleForm.pass"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <!-- <el-form-item label="确认密码" prop="checkPass">
    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
  </el-form-item> -->

      <el-form-item>
        <el-button
          type="primary"
          @click="submitForm('ruleForm')"
          size="medium"
          class="login-btn"
          >登录</el-button
        >
        <!-- <el-button type="primary" @click="userLogin()" size="medium" class="login-btn">登录</el-button> -->
      </el-form-item>
    </el-form>
  </div>
</template>

<script scoped>
import { Message } from "element-ui";
import { setToken } from "@/utils/auth";
import { login } from "../../../api/szpt/szpt_login";

// import {postRequest} from '@/utils/szptUtils/post-request'

export default {
  name: "UserRegister",
  data() {
    var checkAccount = (rule, value, callback) => {
      setTimeout(() => {
        if (!value) {
          return callback(new Error("账户不能为空！"));
        } else {
          if (value.toString().length > 6) {
            return callback(new Error("账户为小于6个字符或数字！"));
          } else {
            callback();
          }
        }
      }, 500);
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (value.toString().length < 6 || value.toString().length > 10) {
          return callback(new Error("请输入6~10位数字作为密码！"));
        }
        callback();
      }
    };
    return {
      ruleForm: {
        pass: "123123",
        checkPass: "123123",
        account: "张三",
      },
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        account: [{ validator: checkAccount, trigger: "blur" }],
      },
    };
  },
  // methods: {
  //   submitForm(formName) {
  //     console.log(this.ruleForm.account,this.ruleForm.pass,this.DataTag.VisURL.path)

  //     this.$refs[formName].validate((valid) => {
  //       if (valid) {
  //       postRequest(this.DataTag.VisURL.path+'/login',{
  //       username:this.ruleForm.account.toString(),
  //       password:this.ruleForm.pass.toString(),

  //     }).then((resp) => {

  //       //  将后端返回来的token本地缓存
  //       const tokenStr = resp.token;
  //       window.sessionStorage.setItem('tokenStr',tokenStr);

  //       if (JSON.stringify(resp)) {
  //           Message.success({ message: '登录成功！' });
  //           // 需要验证输入的地址是否为登录地址
  //           // let path = this.$router.query.redirect;
  //           // this.$router.replace((path=='/szptLogin/login'||path==undefined)?'/SzptHome':path);
  //           this.$router.push('/SzptHome')
  //           return;
  //       }
  //       Message.error({ message: '登录失败！' });
  //     })

  //       } else {
  //         // console.log('error submit!!');
  //         Message.error({ message: '登录失败！该用户不存在' });
  //         return false;
  //       }
  //     });
  //   },
  //   resetForm(formName) {
  //     this.$refs[formName].resetFields();
  //   },

  //   // userLogin(){

  //   //   console.log(this.ruleForm.account.toString,this.ruleForm.pass.toString())

  //   //   postRequest('login',{
  //   //     username:this.ruleForm.account.toString(),
  //   //     password:this.ruleForm.pass.toString(),

  //   //   }).then((resp) => {
  //   //     alert(JSON.stringify(resp))
  //   //   })

  //   // }

  // },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          login({
            username: this.ruleForm.account.toString(),
            password: this.ruleForm.pass.toString(),
          }).then((resp) => {
            if (resp.code == 200 && resp.msg == "操作成功") {
              // 将响应回来的token存进sessionStorage中
              const token = resp.token;
              setToken(token);
              this.$modal.msgSuccess("登录成功！");
              this.getDicts("szpt_nav_status").then((response) => {
                this.$router.replace({
                  name: "szptHome",
                  query: { id: response.data[0].dictCode },
                });
              });
            } else {
              this.$modal.msgError("网络繁忙，请稍后重试！");
              return;
            }
          });
        } else {
          Message.error({ message: "登录失败！该用户不存在" });
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
.user-Register {
  position: relative;
  width: 400px;
  top: 50%;
  left: 45%;
  transform: translate(-50%, -50%);
}
.login-btn {
  width: 120px;
  color: white;
  position: relative;
  left: 70px;
}
</style>
